import React, { useState } from 'react';
import { Modal, Tabs, Input, Select, Radio, Button, message, Upload } from 'antd';
import { PlusOutlined, SearchOutlined, CloseOutlined, UploadOutlined, CloudUploadOutlined } from '@ant-design/icons';
import './AddProductModal.scss';

const { Option } = Select;
const { TabPane } = Tabs;

interface AddProductModalProps {
  visible: boolean;
  onCancel: () => void;
  onOk: (productData: any) => void;
}

const AddProductModal: React.FC<AddProductModalProps> = ({
  visible,
  onCancel,
  onOk
}) => {
  const [activeTab, setActiveTab] = useState('1');
  const [formData, setFormData] = useState({
    barcode: '',
    productCode: '',
    productName: '',
    specModel: '',
    category: '',
    brand: '',
    unit: '',
    purchasePrice: '',
    wholesalePrice: '',
    retailPrice: '',
    points: '',
    warehouse: '选择默认仓库',
    location: '',
    stockWarning: '20',
    remark: '',
    status: 'active',
    retailName: '',
    productImage: ''
  });
  const [fileList, setFileList] = useState<any[]>([]);

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSave = () => {
    // 验证必填字段
    if (!formData.productName) {
      message.error('商品名称为必填项');
      return;
    }
    
    if (!formData.category) {
      message.error('分类为必填项');
      return;
    }
    
    onOk(formData);
  };

  // 检测条码
  const handleCheckBarcode = () => {
    if (!formData.barcode) {
      message.error('请先输入条形码');
      return;
    }
    
    message.loading('正在检测条码...');
    // 模拟API调用
    setTimeout(() => {
      message.success('条码检测完成');
    }, 1000);
  };
  
  // 添加新分类
  const handleAddCategory = () => {
    // 实现添加分类的逻辑
    message.info('添加新分类功能待实现');
  };

  // 处理图片上传
  const handleImageChange = (info: any) => {
    let newFileList = [...info.fileList];
    
    // 限制只能上传一张图片
    newFileList = newFileList.slice(-1);
    
    // 更新文件列表和URL
    setFileList(newFileList);
    
    if (info.file.status === 'done') {
      // 获取上传后的图片URL
      const imageUrl = info.file.response?.url || '';
      handleInputChange('productImage', imageUrl);
      message.success(`${info.file.name} 上传成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  };

  // 自定义上传按钮
  const uploadButton = (
    <div className="upload-area">
      <CloudUploadOutlined className="upload-icon" />
      <p className="upload-text">点击上传图像</p>
    </div>
  );

  return (
    <Modal
      title={null}
      open={visible}
      onCancel={onCancel}
      width={800}
      closeIcon={null}
      bodyStyle={{ padding: 0, maxHeight: 'calc(100vh - 100px)', overflow: 'auto' }}
      footer={null}
      className="add-product-modal"
      centered
    >
      <div className="modal-header">
        <div className="modal-title">添加商品</div>
        <CloseOutlined className="close-icon" onClick={onCancel} />
      </div>

      <Tabs 
        activeKey={activeTab}
        onChange={setActiveTab}
        className="product-tabs"
      >
        <TabPane tab="基础信息" key="1">
          <div className="form-content">
            <div className="form-tip-text">
              提示: <span className="red-star">*</span> 为必填项，不能为空。
            </div>
            
            <div className="form-grid">
              <div className="form-item">
                <label>条形码</label>
                <div className="with-button">
                  <Input
                    placeholder="选填，扫描或录入条形码"
                    value={formData.barcode}
                    onChange={e => handleInputChange('barcode', e.target.value)}
                  />
                  <Button type="primary" className="check-barcode-btn" onClick={handleCheckBarcode}>检测条码</Button>
                </div>
              </div>
              
              <div className="form-item">
                <label>商品编号</label>
                <Input
                  placeholder="请输入商品编号"
                  value={formData.productCode}
                  onChange={e => handleInputChange('productCode', e.target.value)}
                />
              </div>
              
              <div className="form-item required">
                <label><span className="red-star">*</span> 商品名称</label>
                <Input
                  placeholder="请输入商品名称"
                  value={formData.productName}
                  onChange={e => handleInputChange('productName', e.target.value)}
                />
              </div>
              
              <div className="form-item">
                <label>规格型号</label>
                <Input
                  placeholder="请输入规格型号"
                  value={formData.specModel}
                  onChange={e => handleInputChange('specModel', e.target.value)}
                />
              </div>
              
              <div className="form-item required">
                <label><span className="red-star">*</span> 分类</label>
                <div className="with-button">
                  <Select
                    placeholder="选择商品分类"
                    value={formData.category}
                    onChange={value => handleInputChange('category', value)}
                    style={{ width: '100%' }}
                  >
                    <Option value="category1">常用资料</Option>
                    <Option value="category2">快速添加</Option>
                  </Select>
                  <Button type="link" className="new-category-btn" onClick={handleAddCategory}>新建</Button>
                </div>
              </div>
              
              <div className="form-item">
                <label>计量单位</label>
                <Select
                  placeholder="选择商品单位"
                  value={formData.unit}
                  onChange={value => handleInputChange('unit', value)}
                  style={{ width: '100%' }}
                >
                  <Option value="个">个</Option>
                  <Option value="套">套</Option>
                  <Option value="台">台</Option>
                </Select>
              </div>
              
              <div className="form-item">
                <label>商品品牌</label>
                <Select
                  placeholder="选择商品品牌"
                  value={formData.brand}
                  onChange={value => handleInputChange('brand', value)}
                  style={{ width: '100%' }}
                >
                  <Option value="brand1">品牌1</Option>
                  <Option value="brand2">品牌2</Option>
                </Select>
              </div>
              
              <div className="form-item">
                <label>进货价格</label>
                <Input
                  placeholder="请输入进货价格"
                  value={formData.purchasePrice}
                  onChange={e => handleInputChange('purchasePrice', e.target.value)}
                />
              </div>
              
              <div className="form-item">
                <label>批发价格</label>
                <Input
                  placeholder="请输入销售价格"
                  value={formData.wholesalePrice}
                  onChange={e => handleInputChange('wholesalePrice', e.target.value)}
                />
              </div>
              
              <div className="form-item">
                <label>零售价格</label>
                <Input
                  placeholder="请输入零售价格"
                  value={formData.retailPrice}
                  onChange={e => handleInputChange('retailPrice', e.target.value)}
                />
              </div>
              
              <div className="form-item">
                <label>兑换积分</label>
                <Input
                  placeholder="请输入兑换积分"
                  value={formData.points}
                  onChange={e => handleInputChange('points', e.target.value)}
                />
              </div>
              
              <div className="form-item">
                <label>仓库</label>
                <Select
                  placeholder="选择默认仓库"
                  value={formData.warehouse}
                  onChange={value => handleInputChange('warehouse', value)}
                  style={{ width: '100%' }}
                >
                  <Option value="warehouse1">选择默认仓库</Option>
                </Select>
              </div>
              
              <div className="form-item">
                <label>商品货位</label>
                <Input
                  placeholder="请输入商品货位"
                  value={formData.location}
                  onChange={e => handleInputChange('location', e.target.value)}
                />
              </div>
              
              <div className="form-item">
                <label>库存预警</label>
                <Input
                  placeholder="请输入库存预警值"
                  value={formData.stockWarning}
                  onChange={e => handleInputChange('stockWarning', e.target.value)}
                />
              </div>
              
              <div className="form-item">
                <label>备注信息</label>
                <Input
                  placeholder="请输入备注信息"
                  value={formData.remark}
                  onChange={e => handleInputChange('remark', e.target.value)}
                />
              </div>
            </div>
            
            <div className="form-row">
              <div className="form-item">
                <label>商品状态</label>
                <Radio.Group
                  value={formData.status}
                  onChange={e => handleInputChange('status', e.target.value)}
                >
                  <Radio value="active">启用</Radio>
                  <Radio value="inactive">停用</Radio>
                </Radio.Group>
              </div>
            </div>
            
            <div className="form-bottom-tip">
              如需补助属性等信息请在资料-商品 菜单下维护;如果用了多仓库、批次或串码功能，在销售单页面添加商品不会显示商品，需要先开进货单入库。
            </div>
            
            <div className="form-actions">
              <Button className="save-btn" type="primary" onClick={handleSave}>
                保存
              </Button>
              <Button className="cancel-btn" onClick={onCancel}>
                取消
              </Button>
            </div>
          </div>
        </TabPane>
        <TabPane tab="图文详情" key="2">
          <div className="image-detail-content">
            <div className="retail-name-row">
              <label>零售名称</label>
              <Input
                placeholder="请输入零售名称"
                value={formData.retailName}
                onChange={e => handleInputChange('retailName', e.target.value)}
              />
            </div>
            
            <div className="image-section">
              <div className="section-title">
                <span>商品图像</span>
                <span className="section-tip">提示: 右键图片即可删除</span>
              </div>
              
              <Upload
                name="productImage"
                listType="picture-card"
                className="image-uploader"
                showUploadList={true}
                fileList={fileList}
                action="/api/upload" // 替换为实际的上传接口
                onChange={handleImageChange}
                onRemove={() => {
                  setFileList([]);
                  handleInputChange('productImage', '');
                  return true;
                }}
              >
                {fileList.length >= 1 ? null : uploadButton}
              </Upload>
            </div>
            
            <div className="form-bottom-tip">
              如需补助属性等信息请在资料-商品 菜单下维护;如果用了多仓库、批次或串码功能，在销售单页面添加商品不会显示商品，需要先开进货单入库。
            </div>
            
            <div className="form-actions">
              <Button className="save-btn" type="primary" onClick={handleSave}>
                保存
              </Button>
              <Button className="cancel-btn" onClick={onCancel}>
                取消
              </Button>
            </div>
          </div>
        </TabPane>
      </Tabs>
    </Modal>
  );
};

export default AddProductModal; 